【Day 5】前端開發之旅－標籤與分類

2024 iThome 鐵人賽

DAY 5

JavaScript

「前端開發快速入門：從基礎到現代框架的實戰之旅」系列第 5 篇

16th鐵人賽

dcheng0915

2024-09-19 23:57:47

68 瀏覽

分享至

今天則是在原有的基礎上，在 Project 詳細資訊中新增標籤與分類。

主要修改的部分為：

<div id="projectModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeProjectDetails()">&times;</span>
        <h2 id="modalTitle"></h2>
        <p id="modalDescription"></p>
        <div id="modalTags"></div>
        <div id="modalCategories"></div>
    </div>
</div>

新增 div#modalTags 與 div#modalCategories 作為放置標籤與分類的容器。

const modal = document.getElementById("projectModal");
const modalTitle = document.getElementById("modalTitle");
const modalDescription = document.getElementById("modalDescription");
const modalTags = document.getElementById("modalTags");
const modalCategories = document.getElementById("modalCategories");

function showProjectDetails(projectId) {
    const projectDetails = getProjectDetails(projectId);

    modalTitle.textContent = projectDetails.title;
    modalDescription.textContent = projectDetails.description;
    modalTags.textContent = projectDetails.tags;
    modalCategories.textContent = projectDetails.categories;

    modal.style.display = "block";
}

function getProjectDetails(projectId) {
    const projects = {
        1: {
            title: "Project 1",
            description: "詳細描述 Project 1...",
            tags: ["HTML", "CSS", "JavaScript"],
            categories: ["Web Development"]
        },
        2: {
            title: "Project 2",
            description: "詳細描述 Project 2...",
            tags: ["Vue", "React", "Angular"],
            categories: ["Frontend"]
        },
        3: {
            title: "Project 3",
            description: "詳細描述 Project 3...",
            tags: ["Node.js", "Golang", "Python"],
            categories: ["Backend"]
        }
    };
    return projects[projectId];
}

index.html 完整程式碼：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: gray;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            max-width: 1024px;
            margin: 0 auto;
        }
        .header {
            /* min-height: 100px; */
            background-color: lightskyblue;
        }
        .header-title {
            padding: 8px 0 8px 16px;
        }
        .main {
            flex-grow: 1;
            background-color: lightgrey;
            padding: 16px 0;
        }
        .main-section {
            padding: 0 16px;
            margin: 0 0 16px;
        }
        .main-section-projects {
            padding: 8px 0 0 16px;
        }
        .main-section-projects-item {
            padding: 8px 0;
        }
        .footer {
            /* min-height: 100px; */
            background-color: lightslategray;
        }
        .footer-text {
            padding: 8px 0;
            text-align: center;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="header-title">My Blog</h1>

            <nav>
                <a href="index.html">Home</a>
                <a href="projects.html">Projects</a>
            </nav>
        </header>

        <main class="main">
            <section class="main-section">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Contact</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Experience</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Education</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Skills</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Projects</h2>
                <div class="main-section-projects">
                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 1</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>

                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 2</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                    
                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 3</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                </div>
            </section>

            <div id="projectModal" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closeProjectDetails()">&times;</span>
                    <h2 id="modalTitle"></h2>
                    <p id="modalDescription"></p>
                    <div id="modalTags"></div>
                    <div id="modalCategories"></div>
                </div>
            </div>
        </main>
        
        <footer class="footer">
            <p class="footer-text">Copyright © 2024 My Blog</p>
        </footer>
    </div>

    <script>
        const modal = document.getElementById("projectModal");
        const modalTitle = document.getElementById("modalTitle");
        const modalDescription = document.getElementById("modalDescription");
        const modalTags = document.getElementById("modalTags");
        const modalCategories = document.getElementById("modalCategories");

        function showProjectDetails(projectId) {
            const projectDetails = getProjectDetails(projectId);

            modalTitle.textContent = projectDetails.title;
            modalDescription.textContent = projectDetails.description;
            modalTags.textContent = projectDetails.tags;
            modalCategories.textContent = projectDetails.categories;

            modal.style.display = "block";
        }

        function closeProjectDetails() {
            modal.style.display = "none";
        }

        function getProjectDetails(projectId) {
            const projects = {
                1: {
                    title: "Project 1",
                    description: "詳細描述 Project 1...",
                    tags: ["HTML", "CSS", "JavaScript"],
                    categories: ["Web Development"]
                },
                2: {
                    title: "Project 2",
                    description: "詳細描述 Project 2...",
                    tags: ["Vue", "React", "Angular"],
                    categories: ["Frontend"]
                },
                3: {
                    title: "Project 3",
                    description: "詳細描述 Project 3...",
                    tags: ["Node.js", "Golang", "Python"],
                    categories: ["Backend"]
                }
            };
            return projects[projectId];
        }
        
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>